<template>
  <div class="setting mg-0">
    <div class="content">
      <div class="set_content mgt-20">
        <div>
          <div class="set_title theme-color fontW-9 font-45 mgtb-20 text-s">{{$t('setting.title')}}</div>
          <div class="set_left_set bg-5d border-r boxS-i-4" @click="getSetStatus">
            <div data_id="0" :class="active==0? 'theme-color':'color-f'" class="set_nav font-20 fontW-7 border_b-1 pdl-15">{{$t('setting.personal')}}</div>
            <div data_id="1" :class="active==1? 'theme-color':'color-f'" class="set_nav font-20 fontW-7 border_b-1 pdl-15">{{$t('setting.nft_broker')}}</div>
            <div data_id="2" :class="active==2? 'theme-color':'color-f'" class="set_nav font-20 fontW-7 pdl-15">{{$t('setting.appeal')}}</div>
          </div>
        </div>
        <div class="mgl-30 flex-1 setItem">
          <user v-if="active== 0"/>
          <broker v-if="active== 1"/>
          <appeal v-if="active== 2"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import User from '../../components/component/User'
import Broker from '../../components/component/Broker'
import Appeal from '../../components/component/Appeal'
export default {
  components: {
    User,
    Broker,
    Appeal
  },
  data () {
    return {
      tabPosition: 'left',
      active: 0
    }
  },
  created () {
  },
  methods: {
    getSetStatus: function (e) {
      this.active = e.target.getAttribute('data_id')
    }
  }
}
</script>
<style lang="less" scoped>
  .setting {
    width: 93%;
    height: auto;
    .content {
      .set_title {}
      .set_content {
        display: flex;
        .set_left_set {
          width: 270px;
          height: auto;
          .set_nav {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-family: Inter-Bold;
            cursor: pointer;
          }
        }
        .setItem {
          padding-bottom: 30px;
        }
      }
    }
  }
</style>
